<template>
	 <div id='root' class="root">
		<ul class="list" id="list">
			<li>全单1</li>
			<li>全部菜2单</li>
			<li>全部3单</li>
			<li>菜单4</li>
			<li>全菜单</li>
			<li>全部5菜单</li>
			<li>全6单</li>
			<li>全6部菜单</li>
			<li>全菜7单</li>
			<li>全8单</li>
			<li>全部5菜单</li>
			<li>全6单</li>
			<li>全6部菜单</li>
			<li>全菜7单</li>
			<li>全8单</li>
			<li>全9部菜单</li>
			<li>全10单</li>
			<li>全11部单</li>
			<li>菜2单</li>
			<li>全菜12单</li>
			<li>全32部菜单</li>
		</ul>
	</div>
</template>

<script>
	export default {
	  name: 'seePlate',
	  data() {
	    return {
	
	    }
	  },
	  methods: {
	  },
	  created() {
	
	  },
	  mounted() {
	    var box = document.getElementById('root'); //外面的容器。
	    var listBox = document.getElementById('list'); //ul列表。主要是移动它的left值
	    var list = document.getElementsByTagName('li');//所有列表元素
	    var width = box.clientWidth / 2; //为了判断是左滑还是右滑
	    var totalWidth = 0;
	    for (let i = 0; i < list.length; i++) {
	      totalWidth = totalWidth + list[i].offsetWidth; //所有列表元素的总宽度
	    }
	    for (let i = 0; i < list.length; i++) {
	      var _offset = totalWidth - box.clientWidth; //右边的偏移量
	      list[i].addEventListener('click', function (e) {
	        for (let j = 0; j < list.length; j++) {
	          list[j].className = 'off'; //移除所有元素的样式
	        }
	        list[i].className = 'on';  //给点击的元素添加样式
	        console.log(list[i])
	        var offset = totalWidth - (Math.abs(listBox.offsetLeft) + box.clientWidth) + 100; //右边的偏移量 = 所有元素宽度之和 - （ul容器的左偏移量 + 父容器的宽度）
	        if (e.pageX > width && offset > 0) { //点击右侧并且右侧的偏移量大于0，左滑。
	          listBox.style.left = (listBox.offsetLeft - 200) + 'px';
	        } else if (e.pageX > width && offset > 200) { //临界位置，，右侧滚动到末尾
	          listBox.style.left = -_offset + 'px';
	        }
	        if (e.pageX < width && listBox.offsetLeft < -200) { //点击左侧并且左侧的偏移量小于0，左滑。
	          listBox.style.left = (listBox.offsetLeft + 200) + 'px';
	
	        } else if (e.pageX < width && listBox.offsetLeft < 0) { //临界位置，左侧滚到开始的位置
	          listBox.style.left = 0
	        }
	
	      });
	
	    }
	  }
	}
</script>

<style lang="scss" scoped>
	#root::-webkit-scrollbar {
	  display: none;
	}
	#root {
	  height: 60px;
	  width: 800px;
	  white-space: nowrap;
	  overflow-x: auto;
	  overflow-y:hidden;
	  -webkit-overflow-scrolling: touch;
	  white-space: nowrap;
	  position: relative;
	  border-bottom: 1px solid #eee;
	  padding-right: 20px;
	  background-color: #f5f5f5;
	  margin-left: 100px;
	  margin-top: 50px;
	}
	.list {
	  position: absolute;
	  left: 0;
	  top: 0;
	  /*width: 100%;*/ /*不能为100%，不然宽度只有父容器的宽度，我掉进这个坑了。*/
	  transition: all 1s;
	  height: 100%;
	  line-height: 2.5;
	}
	.on {
	  color: red;
	  font-weight: bold;
	}
	.off {
	  color: #000;
	  font-weight: normal;
	}
	.list li {
	  display: inline-block;
	  padding: 10px 20px;
	  cursor: pointer;
	}
</style>
